<template>
    <div>
      <h2>{{$store.state.name}}</h2>
      <h2>{{state.name}}</h2>
      <button @click = "add"> 点击增加</button>
      <h2>{{number}}</h2>
      <h2>{{state.count}}</h2>

    </div>
  </template>
  
<script>
import { ref } from "vue";
import { useStore } from "vuex";

  export default {
    name: 'Count',
    props:{

    },
    setup(){
        const store = useStore();
        const state = ref(store.state)
        const number = ref(0)
        const add = function(){
            number.value++
            store.commit('increment')
        }
        return{
            state,
            number,
            add
        }
    }

   
  }
  </script>
  <style></style>
  
